<template>
  <div>
    <el-tabs v-model="activeName2" type="card">
      <el-tab-pane label="基础信息" name="second">
        <div class="second-contain">
          <div class="head">
            <h1>基础信息</h1>
          </div>
          <div class="second-contain-box second-contain-box2 ma">
            <el-row>
              <el-col :span="8">
                <span>学校名称：{{ schInfo.name }}</span>
              </el-col>
              <el-col :span="8">
                <span>学校人数：{{ schInfo.peopleNum }}</span>
              </el-col>
              <el-col :span="8">
                <span>学校负责人：{{ schInfo.contact }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>职位：{{ schInfo.duty }}</span>
              </el-col>
              <el-col :span="8">
                <span>手机：{{ schInfo.phone }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="second-contain-box second-contain-box2  ma">
            <el-row>
              <el-col :span="8">
                <span>三方：{{ schInfo.thirdNameStr }}</span>
              </el-col>
              <el-col :span="8">
                <span
                  >合同签署时间：{{schInfo.thirdContractSignedDate}}</span
                >
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span
                  >合同到期时间：{{ schInfo.thirdContractEndDate}}</span
                >
              </el-col>
              <el-col :span="8">
                <span>意向程度：{{ schInfo.typeName }}</span>
              </el-col>
              <el-col :span="8">
                <span>回款情况：{{ schInfo.paymentSituation }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>地区：{{ address + schInfo.areaInput }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane label="跟进情况" name="third">
        <div class="third-contain-box">
          <div class="head">
            <h1>客户跟进</h1>
          </div>
          <Crm-table
            :showBatchDelete="false"
            :loading='loading'
            class="table-width"
            permsEdit="sys:user:edit"
            permsDelete="sys:user:delete"
            :data="pageRequest"
            :columns="columns"
            @findPage="findPage"
            @handleFollow="handleFollow"
          ></Crm-table>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <div class="second-contain" style="padding-bottom:50px;">
      <div class="head">
        <h1>跟进情况</h1>
      </div>
      <Crm-table
        seeSchoolTracking
        :showBatchDelete="showBatchDelete"
        class="tracking-table"
        :data="detailRecordInfoData"
        :columns="columns3"
        @findPage2="findPage2"
        @handleSee='handleSee'
        :loading="loading"
      >
      </Crm-table>
    </div>

    <KtButton
      :label="$t('action.close')"
      perms="true"
      size="medium"
      style="margin-top: 2%;"
      @click="closeSelectedTag()"
    ></KtButton>
    <!-- 跟进详情 -->
    <el-dialog
    title="跟进详情"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleCloseDialogVisible">
    <div class="trckingList">
      <ul>
        <li v-for="item in rowData.recordPlans">
          <span class="title">{{item.recordName}}</span>:{{item.recordContent}}        
        </li>
      </ul>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>
<script>
import { hasPermission } from "@/permission/index.js";
import axios from "axios";
import KtButton from "@/views/Core/KtButton";
import api from "@/http/api";
import CrmTable from "@/views/Core/CrmTable";
import { CodeToText } from "element-china-area-data";
export default {
  name: "SeeSchoolfile",
  components: {
    KtButton,
    CrmTable
  },
  data() {
    return {
      filters: {
        name: ""
      },
      address: "",
      contractDate: true,
      selection: false,
      activeName2: "second",
      showBatchDelete: false,
      loading: false, // 加载标识
      schInfo: [], //调用查询详情接口，赋值对象，上面就自动显示
      student_system_cache_options: [], // 学制
      student_level_cache_options: [], // 学段
      student_data_from_options: [], // 客户来源
      student_type_options: [], // 客户类型
      student_progress_options: [], // 客户进展
      student_communication_type: [],
      // 客户跟进数据
      followdata: [],
      columns: [
        { type: "index", label: "序号", minWidth: 10 },
        // { prop: "trackingDate", label: "跟进时间", minWidth: 100 },
        { prop: "contactTrack", label: "联系人", minWidth: 50 },
        { prop: "communicationTypeName", label: "沟通形式", minWidth: 50 },
        { prop: "typeName", label: "客户类型", minWidth: 50 },
        { prop: "jinzhan", label: "客户进展", minWidth: 50 },
        { prop: "communicationContent", label: "沟通内容", minWidth: 120 },
        { prop: "nextTrackingDateDetail", label: "下次跟进时间", minWidth: 100 }
      ],
      columns3: [
        { type: "index", label: "序号", minWidth: 10 },
        { prop: "trackingDate", label: "拜访/宴请/参会时间", minWidth: 200 },
        { prop: "nextRecordDate", label: "下次跟进时间", minWidth: 200 },
        { prop: "recordType", label: "报备类别", minWidth: 100 ,},
        // { prop: "recordContent", label: "跟踪情况", minWidth: 80 },
        // { prop: "nextPlan", label: "下次跟进计划", minWidth: 100 },
        // { prop: "majorDifficulty", label: "项目主要障碍", minWidth: 100 },
        // { prop: "neededSupport", label: "需要的支持", minWidth: 120 },
        // { prop: "competitor", label: "竞争对手", minWidth: 100 },
        // { prop: "charge", label: "收费标准", minWidth: 100 },
        // { prop: "expectedClosingDate", label: "预计成交时间", minWidth: 100 },
        // { prop: "plannedPeopleNum", label: "计划招生人数", minWidth: 100 }
      ],
      pageResult: {},
      pageRequest: { pageNum: 1, pageSize: 10 },
      editLoading: false,
      queryid: "",
      loading: false, // 加载标识
      schInfo: {
        areaInput: ""
      },
      // 报备数据
      // detailRecordInfoData: [],// 报备数据
      detailRecordInfoData: {
        content: [

        ]
      },
      rowData:[],
      school_recordType_options: [],
      pageRequest2: {
        pageNum: 1,
        pageSize: 10
      },
      queryTrackingHeader:[],
      dialogVisible:false,
      trackingData:[],
      schoolTripartiteTypeOption:[]
    };
  },
  watch: {
    // $route: "getParams"
  },
  beforeMount: function() {
    //   请求页面传过来的ID根据ID发送请求
    let routerParams = this.$route.query;
     this.$api.agent
        .queryCommonKV({
            codeType:'school_tripartite_type'
        })
        .then(res => {
        this.schoolTripartiteTypeOption=res.data
        });
    this.get_student_type();    
  },
  methods: {
    get_page_data() {
      this.queryid = this.$route.query.id;
      var queryParams = { id: this.queryid };

      this.$api.school
        .schoolQueryInfo({ id: this.$route.query.id })
        .then(res => {
          if (res.result == 1) {
            let resData = res.schoolInfo;
            this.schInfo = resData;
            if (
              (res.schoolInfo.province == null) &
                (res.schoolInfo.city == null) &
                (res.schoolInfo.area == null) &
                (res.schoolInfo.areaInput == null) ||
              (res.schoolInfo.province == "null") &
                (res.schoolInfo.city == "null") &
                (res.schoolInfo.area == "null") &
                (res.schoolInfo.areaInput == "null")
            ) {
              this.address = " ";
              this.schInfo.areaInput = "";
            } else if (
              (res.schoolInfo.province == null) &
                (res.schoolInfo.city == null) &
                (res.schoolInfo.area == null) &
                (res.schoolInfo.areaInput != null) ||
              (res.schoolInfo.province == "null") &
                (res.schoolInfo.city == "null") &
                (res.schoolInfo.area == "null") &
                (res.schoolInfo.areaInput != "null")
            ) {
              this.address = "";
              this.schInfo.areaInput = res.schoolInfo.areaInput;
            } else if (res.schoolInfo.areaInput == null) {
              this.address =
                CodeToText[res.schoolInfo.province] +
                CodeToText[res.schoolInfo.city] +
                CodeToText[res.schoolInfo.area];
              this.schInfo.areaInput = "";
            } else if (
              (res.schoolInfo.province != null &&
                res.schoolInfo.city != null &&
                res.schoolInfo.area != null &&
                res.schoolInfo.areaInput != null) ||
              (res.schoolInfo.province != "null" &&
                res.schoolInfo.city != "null" &&
                res.schoolInfo.area != "null" &&
                res.schoolInfo.areaInput != "null")
            ) {
              this.address =
                CodeToText[res.schoolInfo.province] +
                CodeToText[res.schoolInfo.city] +
                CodeToText[res.schoolInfo.area];
              this.schInfo.areaInput = res.schoolInfo.areaInput;
            }
            if (
              this.schInfo.contractStartDate == null &&
              this.schInfo.contractEndDate == null
            ) {
              this.contractDate = "";
            } else {
              this.contractDate =
                this.schInfo.contractStartDate +
                "——" +
                this.schInfo.contractEndDate;
            }

            // 转换三方
            this.schoolTripartiteTypeOption.forEach(j=>{
              if(this.schInfo.thirdName==j.key){
                this.schInfo.thirdNameStr=j.value
              }
            })
            //转换客户类型
            this.student_type_options.forEach(student_type => {
              if (student_type.key == this.schInfo.type) {
                this.schInfo.typeName = student_type.value;
              }
            });
          } else {
            //报错
          }
        });
    },
    // 查询报备列表
    findPage2(data) {
 
      if (data !== null) {
        this.pageRequest2 = data.pageRequest;
      }
      // 查询表头
      
      this.queryTrackingHeader=JSON.parse(localStorage.getItem("schoolTrackingHeader"))
      this.$api.school
        .detailRecordInfo({
          id: this.$route.query.id,
          pageSize: this.pageRequest2.pageSize,
          pageNum: this.pageRequest2.pageNum
        })
        .then(res => {
          let content = { content: res.trackLists, totalSize: res.total };
          this.detailRecordInfoData = content;
          this.detailRecordInfoData.content.forEach(item => {
            this.school_recordType_options.forEach(type_item => {
              if (type_item.key == item.recordType) {
                item.recordType = type_item.value;
              }
              this.queryTrackingHeader.forEach(i2=>{
                // item.trackingDate=item.trackingDateStart+'--'+item.trackingDateEnd
                item.trackingDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.trackingDateStart
                        );
                item.nextRecordDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.nextRecordDate
                        );
      
                })
              });
          });
          
        })
        .then(data != null ? data.callback : "");
    },
    handleSee(params){
      this.dialogVisible=true
      this.rowData=params.row
    },
    handleCloseDialogVisible(){
      this.dialogVisible=false
    },
    hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled;
    },
    handleClose() {
      this.$router.push({ path: "/Customer/School" });
    },

    // 学制
    get_system_cache() {
      this.student_system_cache_options = JSON.parse(
        localStorage.getItem("systemCache")
      );
      // this.$api.user.optionsList({ codeType: "system_cache" }).then(res => {
      //   this.student_system_cache_options = res.systemList;
      // });
    },

    // 学段
    get_level_cache() {
      this.student_level_cache_options = JSON.parse(
        localStorage.getItem("schoolSection")
      );
    },

    // 客户来源
    get_student_data_from() {
      this.student_data_from_options = JSON.parse(
        localStorage.getItem("schoolSource")
      );
      
    },
    // 报备类别
    schoolVisitType() {
      // this.$api.dropdown.schoolVisitType().then(res => {
      //   this.school_recordType_options = res.keyValueList;
      // });
      this.school_recordType_options = JSON.parse(
        localStorage.getItem("schoolRecordTypeOptions")
      );
    },
    // 客户类型
    get_student_type() {
      this.student_type_options = JSON.parse(
        localStorage.getItem("schoolType")
      );
    },

    // 客户进展
    get_student_progress() {
      this.student_progress_options = JSON.parse(
        localStorage.getItem("schoolProgress")
      );
    },

    // 沟通方式
    get_contractType() {
      this.student_communication_type = JSON.parse(
        localStorage.getItem("contractType")
      );
    },

    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.pageRequest = Object.assign({}, data.pageRequest);
      } else {
        this.pageRequest = Object.assign({}, this.pageRequest);
      }
      this.pageRequest.id = this.$route.query.id;

      this.$api.school
        .schooldetail(this.pageRequest)
        .then(res => {
          let content = { content: res.trackLists, totalSize: res.total };
          this.pageRequest = content;
          this.pageRequest.content.forEach(item => {

            

          });
        })
        .then(data != null ? data.callback : "");
    },

    isActive(route) {
      return route.path === this.$route.path;
    },
    closeSelectedTag(view) {
      this.$store.dispatch("delVisitedViews", this.$route).then(views => {
        if (this.isActive(this.$route)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            this.$router.push(latestView);
          } else {
            this.$router.push("/");
          }
        }
      });
    },

    handleFollow(params) {
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({
        path: "/Follow/SchoolFollow",
        query: {
          id: params.row.id,
          name: this.schInfo.name
        }
      });
    }
  },

  mounted() {
    this.get_system_cache();
    this.get_level_cache();
    this.get_student_data_from();
    
    this.get_student_progress();
    this.get_contractType();
    this.get_page_data();
    this.schoolVisitType();
    this.findPage2(null);
  }
};
</script>
<style lang="scss" scoped>
.trckingList{
  ul{
    padding-left:0;
    li{
      list-style: none;
      text-align: left;
      line-height: 30px;
      .title{
        font-weight: bold;
      }
    }
  }
}
.third-contain-box {
  text-align: left;
  width: 90%;
  margin: 20px auto;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  .head h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
  }
}
.second-contain {
  text-align: left;
  width: 90%;
  margin: 0 auto;
  border: 1px solid #e4e7ed;
  .head h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
  }
  .second-contain-box {
    width: 95%;
    margin-left: 2%;
    .el-form {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .el-form-item {
        display: flex;

        margin-left: 20px;
      }
    }
    .el-table td {
      border-bottom: 0px !important;
    }
    .address span {
      display: inline-block;
      margin: 0 20px;
    }
  }
}
.stu-btn {
  margin: 20px 0;
}
</style>
<style lang="scss">
.second-contain-box {
  width: 95%;
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0px !important;
  }
  .has-gutter {
    display: none;
  }
  .el-row {
    margin: 30px 0;
  }
  .el-row .el-col {
    margin-left: 0 !important;
  }
}
.second-contain-box2 {
  .el-row .el-col {
    margin: 10px 0;
  }
}
</style>
